<template>
	<header class="header">
		<div class="header-container">
			<div class="header-logo">
				<img src="@/assets/images/logo.png" class="logo" alt="logo" />
				<div class="title">尚医通 预约挂号统一平台</div>
			</div>
			<div class="header-menu">
				<div>帮助中心</div>
				<div>登录/注册</div>
			</div>
		</div>
	</header>
</template>

<script lang="ts">
	export default {
		name: 'hospitalHeader',
	};
</script>

<script setup lang="ts"></script>

<style lang="scss" scoped>
	.header {
		width: 100vw;
		height: 70px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #f6f6f6;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;

		.header-container {
			width: 1200px;
			height: 100%;
			display: flex;
			justify-content: space-between;

			.header-logo {
				display: flex;
				align-items: center;

				.logo {
					width: 50px;
					height: 50px;
					margin-right: 10px;
				}

				.title {
					font-size: 20px;
					color: #6fbaff;
				}
			}

			.header-menu {
				display: flex;
				align-items: center;

				div {
					color: #a2a496;
					font-size: 14px;
				}

				& > div:last-child {
					margin-left: 10px;
				}

				& > div:hover {
					cursor: pointer;
				}
			}
		}
	}
</style>
